<!-- 借贷压力分析 -->
<template>
	<view class="card d-flex">
		<view class="card_head relative d-flex mb-30">
			<text class="card_head_title relative">借贷压力分析</text>
		</view>
		
		<view class="card_content d-flex mb-20">
			<view class="card_item d-flex">
				<view class="card_item_head d-flex mb-40">
					<text class="card_item_head_title bold relative">申请汇总</text>
					<text class="card_item_head_describe">此部分数据来源于大数据分析</text>
				</view>
				
				<view class="card_table d-flex">
					<view class="card_table_item d-flex">
						<text class="card_table_txt">近1月</text>
						<text class="card_table_txt">申请机构数</text>
					</view>
					<view class="card_table_item d-flex">
						<text class="card_table_txt">近3月</text>
						<text class="card_table_txt">0</text>
					</view>
					<view class="card_table_item d-flex">
						<text class="card_table_txt">近6月</text>
						<text class="card_table_txt">0</text>
					</view>
					<view class="card_table_item d-flex">
						<text class="card_table_txt">近1年</text>
						<text class="card_table_txt">0</text>
					</view>
					<view class="card_table_item d-flex">
						<text class="card_table_txt">近2年</text>
						<text class="card_table_txt">0</text>
					</view>
				</view>
			</view>
			
			<uv-divider :dashed="true"></uv-divider>
			
			<view class="card_item d-flex">
				<view class="card_item_head d-flex mb-20">
					<text class="card_item_head_title bold relative">申请记录的机构类型</text>
				</view>
				
				<uv-tabs :list="timeList" class="mb-20" lineColor="#6B1EF3" :activeStyle="{color: '#6B1EF3'}"></uv-tabs>
				
				<scroll-view :scroll-x="true" class="card_table d-flex scroll">
					<view class="card_table_item d-flex">
						<text class="card_table_txt label">机构类型</text>
						<text class="card_table_txt">申请机构数</text>
						<text class="card_table_txt">通过机构数</text>
						<text class="card_table_txt">拒绝机构数</text>
						<text class="card_table_txt">通过率</text>
					</view>
					<view class="card_table_item d-flex">
						<text class="card_table_txt label">传统银行</text>
						<text class="card_table_txt">0</text>
					</view>
					<view class="card_table_item d-flex">
						<text class="card_table_txt label">网络销售银行</text>
						<text class="card_table_txt">0</text>
					</view>
				</scroll-view>
			</view>
			
			<uv-divider :dashed="true"></uv-divider>
			
			<view class="card_item d-flex">
				<view class="card_item_head d-flex mb-20">
					<text class="card_item_head_title bold relative">贷款场景类型</text>
				</view>
				
				<uv-tabs :list="typeList" class="mb-20" lineColor="#6B1EF3" :activeStyle="{color: '#6B1EF3'}"></uv-tabs>
				
				<scroll-view :scroll-x="true" class="card_table d-flex scroll">
					<view class="card_table_item d-flex">
						<text class="card_table_txt label">场景类别</text>
						<text class="card_table_txt">通过机构数</text>
						<text class="card_table_txt">拒绝机构数</text>
						<text class="card_table_txt">通过率</text>
					</view>
					<view class="card_table_item d-flex">
						<text class="card_table_txt label">全国性银行</text>
						<text class="card_table_txt">0</text>
						<text class="card_table_txt">0</text>
						<text class="card_table_txt">0</text>
					</view>
					<view class="card_table_item d-flex">
						<text class="card_table_txt label">区域银行</text>
						<text class="card_table_txt">0</text>
						<text class="card_table_txt">0</text>
						<text class="card_table_txt">0</text>
					</view>
					<view class="card_table_item d-flex">
						<text class="card_table_txt label">非银-汽车金融</text>
						<text class="card_table_txt">0</text>
						<text class="card_table_txt">0</text>
						<text class="card_table_txt">0</text>
					</view>
					<view class="card_table_item d-flex">
						<text class="card_table_txt label">非银-消费金融</text>
						<text class="card_table_txt">0</text>
						<text class="card_table_txt">0</text>
						<text class="card_table_txt">0</text>
					</view>
					<view class="card_table_item d-flex">
						<text class="card_table_txt label">非银-消费贷款</text>
						<text class="card_table_txt">0</text>
						<text class="card_table_txt">0</text>
						<text class="card_table_txt">0</text>
					</view>
					<view class="card_table_item d-flex">
						<text class="card_table_txt label">非银-小额现金贷</text>
						<text class="card_table_txt">0</text>
						<text class="card_table_txt">0</text>
						<text class="card_table_txt">0</text>
					</view>
					<view class="card_table_item d-flex">
						<text class="card_table_txt label">非银-类信用卡</text>
						<text class="card_table_txt">0</text>
						<text class="card_table_txt">0</text>
						<text class="card_table_txt">0</text>
					</view>
					<view class="card_table_item d-flex">
						<text class="card_table_txt label">非银-保险机构</text>
						<text class="card_table_txt">0</text>
						<text class="card_table_txt">0</text>
						<text class="card_table_txt">0</text>
					</view>
					<view class="card_table_item d-flex">
						<text class="card_table_txt label">非银-小贷公司</text>
						<text class="card_table_txt">0</text>
						<text class="card_table_txt">0</text>
						<text class="card_table_txt">0</text>
					</view>
					<view class="card_table_item d-flex">
						<text class="card_table_txt label">非银-互联网头部机构</text>
						<text class="card_table_txt">0</text>
						<text class="card_table_txt">0</text>
						<text class="card_table_txt">0</text>
					</view>
					<view class="card_table_item d-flex">
						<text class="card_table_txt label">非银-转型机构</text>
						<text class="card_table_txt">0</text>
						<text class="card_table_txt">0</text>
						<text class="card_table_txt">0</text>
					</view>
				</scroll-view>
			</view>
			
		</view>
	
		<view class="card_content d-flex">
			<view class="tips d-flex mb-10">
				<Icon class="mr-10" name="info-circle" size="28rpx" color="#FF0000" />
				<text class="tips_txt">
					提示：<br />
					【传统银行】：依托线下们门店提供活期存款和商业贷款的金融机构。如中国银行、工商银行、建设银行、农业银行等。<br />
					【网络零售银行】：没有线下网点，不做现金业务、没有分行、没有柜台，轻资产、平台化，以服务小微企业为主的线上银行。例如：微众银行、网商银行等。
				</text>
			</view>
			
			<view class="menu d-flex">
				<view class="menu_icon mr-10" :style="{transform: menu ? 'rotateZ(0deg)' : 'rotateZ(180deg)'}"><Icon name="arrow-up" color="#6642EA" size="20rpx" /></view>
				{{ menu ? '收缩' : '展开' }}
			</view>
		</view>
	</view>
</template>

<script setup>
import { reactive, ref } from 'vue';
import Icon from '@/components/Icon/index.vue';

const menu = ref(true);

const timeList = [
	{
		name: '近1月',
	},
	{
		name: '近3月',
	},
	{
		name: '近6月',
	},
	{
		name: '近1年',
	},
	{
		name: '近2年',
	}
]

const typeList = [
	{
		name: '近1年',
	},
	{
		name: '近2年',
	}
]
</script>

<style lang="scss" scoped>
.card {
	flex-direction: column;
	
	&_content {
		flex-direction: column;
	}
	
	&_item {
		width: 100%;
		flex-direction: column;
		&_head {
			align-items: center;
			justify-content: space-between;
			
			&_title {
				padding-left: 30rpx;
				color: #000;
				font: {
					size: 24rpx;
				}
				
				&:before {
					content: '';
					position: absolute;
					left: 0;
					top: 0;
					height: 110%;
					width: 6rpx;
					background-color: #6642EA;
					border-radius: 8rpx;
				}
			}
			
			&_describe {
				color: #6C7282;
				font: {
					size: 24rpx
				}
			}
		}
	}
	
	&_table {
		max-width: 100%;
		flex-direction: column;
		&.scroll {
			.card_table_item {
				width: 900rpx;
				
				.label {
					width: 310rpx;
				}
			}
		}
		&_item {
			align-items: center;
			justify-content: space-between;
			
			&:nth-of-type(odd) {
				background: linear-gradient(to right, #F4F6FF, #FFF5F8);
			}
		}
		
		&_txt {
			padding: 30rpx;
			color: #6C7282;
			white-space: nowrap;
			font: {
				size: 26rpx
			}
		}
	}

	.tips {
		align-items: baseline;
		transition: .3s;
		&_txt {
			line-height: 45rpx;
			color: #6C7282;
			font: {
				size: 27rpx
			}
		}
	}
	
	.menu {
		margin-left: auto;
		align-items: center;
		color: #6642EA;
		font: {
			size: 25rpx
		}
		
		&_icon {
			transition: .3s;
			padding: 3rpx;
			border-radius: 50%;
			border: 1px solid #6642EA;
		}
	}
}
</style>
